<template>
    <div class="app-container carema">

        <div class="left">
            <img :src="src" @error="handleError" style="display:block;width:100%;margin-bottom:
                20px">
            <el-card :header="$t('Preset position')">
                <div class="btns Preset">
                    <el-button type="primary" @click="presetClick(1)">1</el-button>
                    <el-button type="primary" @click="presetClick(2)">2</el-button>
                    <el-button type="primary" @click="presetClick(3)">3</el-button>
                </div>
                <div class="btns Preset">
                    <el-button type="primary" @click="presetClick(4)">4</el-button>
                    <el-button type="primary" @click="presetClick(5)">5</el-button>
                    <el-button type="primary" @click="presetClick(6)">6</el-button>
                </div>
                <div class="btns Preset">
                    <el-button type="primary" @click="presetClick(7)">7</el-button>
                    <el-button type="primary" @click="presetClick(8)">8</el-button>
                    <el-button type="primary" @click="presetClick(9)">9</el-button>
                </div>
                <div style="text-align: center;margin: 40px 0 20px;"><el-button type="primary" size="large"
                        style="width: 200px;" @click="presetSave">{{ $t('SET') }}</el-button></div>
            </el-card>
        </div>
        <el-card :header="$t('Camera control')" class="right">
            <div class="btns">
                <el-button type="primary" @mousedown="mousedown('T')" @mouseup="mouseup" @mouseleave="mouseup"><el-icon>
                        <CaretTop />
                    </el-icon></el-button>
            </div>
            <div class="btns">
                <el-button type="primary" @mousedown="mousedown('L')" @mouseup="mouseup" @mouseleave="mouseup"><el-icon>
                        <CaretLeft />
                    </el-icon></el-button>
                <el-button type="primary" @click="handleClick" @mouseup="mouseup" @mouseleave="mouseup"><el-icon>
                        <Refresh />
                    </el-icon></el-button>
                <el-button type="primary" @mousedown="mousedown('R')" @mouseup="mouseup" @mouseleave="mouseup"><el-icon>
                        <CaretRight />
                    </el-icon></el-button>
            </div>
            <div class="btns">
                <el-button type="primary" @mousedown="mousedown('B')" @mouseup="mouseup" @mouseleave="mouseup"><el-icon>
                        <CaretBottom />
                    </el-icon></el-button>
            </div>
            <div class="btns">
                <el-form-item label="Zoom： " style="margin: 20px 0;"><el-slider v-model.number="curZ" style="width:300px"
                        @change="zoomChange" /></el-form-item>
            </div>
            <div class="switchs">
                <div>
                    <div>{{ $t('Tracking') }}</div>
                    <el-switch v-model="curCfg.tracking" inline-prompt active-text="ON" inactive-text="OFF"
                        @change="switchChange"></el-switch>
                </div>
                <div>
                    <div>{{ $t('Whiteboard') }}</div>
                    <el-switch v-model="curCfg.whiteboard" inline-prompt active-text="ON" inactive-text="OFF"
                        @change="switchChange"></el-switch>
                </div>
                <div>
                    <div>{{ $t('Overhead') }}</div>
                    <el-switch v-model="curCfg.overhead" inline-prompt active-text="ON" inactive-text="OFF"
                        @change="switchChange"></el-switch>
                </div>
                <div>
                    <div>{{ $t('Deskview') }}</div>
                    <el-switch v-model="curCfg.deskview" inline-prompt active-text="ON" inactive-text="OFF"
                        @change="switchChange"></el-switch>
                </div>
                <div>
                    <div>HDR</div>
                    <el-switch v-model="curCfg.hdr" inline-prompt active-text="ON" inactive-text="OFF"
                        @change="switchChange"></el-switch>
                </div>
                <div>
                    <div>{{ $t('Mirror') }}</div>
                    <el-switch v-model="curCfg.mirror" inline-prompt active-text="ON" inactive-text="OFF"
                        @change="switchChange"></el-switch>
                </div>
            </div>
        </el-card>
    </div>
</template>
  
<script setup>
import modal from "@/plugins/modal.js"
import { RPC, RPC2, RPC3 } from "@/api/rpc"
import FUNC from "@/api/func"
import getJson from "@/api/getJson"
import i18n from '@/lang'
import errorImg from "@/assets/images/error-img.png"
import { debounce } from "lodash"

const config = reactive([])
const src = ref('')

getJson("config/config.json").then(res => {
    config.length = 0
    config.push(...res.data)
    init()
})
const chnId = ref('')
let timer3 = null
function init() {
    for (var i = 0; i < config.length; i++) {
        if (config[i].type == "usb") {
            chnId.value = config[i].id;
        }
    }
    timer3 = setInterval(show, 200);
}
let timer2 = null
function show() {
    timer2 = setTimeout(snap, 100);
    src.value = `${import.meta.env.VITE_APP_HOST}/snap/snap${chnId.value}.jpg?rnd=${Math.random()}`
}

function snap() {
    RPC("enc.snap", [])
}

function handleError(event) {
    var img = event.srcElement;
    if (errorImg) {
        img.src = errorImg;
    }
}
let curP = ref(0)
let curT = ref(0)
let curZ = ref(0)
let stepP = ref(0)
let stepT = ref(0)
let curCfg = reactive({})

var timer1 = null
function getState() {
    RPC('usb.ptz_get', []).then(res => {
        curP.value = res.data.result.p
        curT.value = res.data.result.t
        curZ.value = res.data.result.z
        timer1 = setTimeout(getState, 500);
    })

    RPC('usb.insta360_get', []).then(res => {
        Object.assign(curCfg, res.data.result)
    })

}
getState();

function mousedown(e) {
    console.log('mousedown')
    if (e == 'L') { stepP.value = -1 }
    if (e == 'R') { stepP.value = 1 }
    if (e == 'T') { stepT.value = 1 }
    if (e == 'B') { stepT.value = -1 }
    ptzStart();
}

function handleClick() {
    ptzStop()
    curP.value = 0;
    curT.value = 0;
    RPC("usb.ptz_set", [curP.value, curT.value, curZ.value])
}
function mouseup() {
    console.log('mouseup')
    ptzStop()
}

let timerId = 0
function ptzStart() {
    if (timerId == 0) {
        timerId = setInterval(ptzTimer, 100);
    }
}
function ptzStop() {
    if (timerId != 0) {
        clearInterval(timerId);
    }
    timerId = 0;
    stepP.value = 0;
    stepT.value = 0;
}
function ptzTimer() {
    curP.value += stepP.value * 3600;
    curT.value += stepT.value * 3600;
    RPC("usb.ptz_set", [curP.value, curT.value, curZ.value])
}

function zoomChange() {
    clearInterval(timer1);
    ptz_set()
}
function ptz_set() {
    RPC("usb.ptz_set", [curP.value, curT.value, curZ.value]).then(res => {
        timer1 = setTimeout(getState, 500);
    })
}
ptz_set = debounce(ptz_set, 300)

function switchChange() {
    RPC("usb.insta360_set", [curCfg]);
}

const preset_set = ref(false)
function presetClick(index) {
    if (preset_set.value) {
        RPC("usb.preset_set", [index, curP.value, curT.value, curZ.value]);
    } else {
        RPC("usb.preset_call", [index])
    }
    preset_set.value = false;
}
function presetSave() {
    preset_set.value = true;
}

onBeforeUnmount(() => {
    if (timerId != 0) {
        clearInterval(timerId);
    }
    clearTimeout(timer1)
    clearTimeout(timer2)
    clearInterval(timer3)
})
</script>
  
<style lang='scss' scoped>
.carema {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    .left {
        width: 480px;
        height: 660px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .right {
        width: 640px;
        height: 660px;
    }
}

.btns {
    display: flex;
    justify-content: center;
    align-items: center;

    .el-button {
        display: block;
        margin: 0;
        border: 1px solid #fff;
        width: 80px;
        height: 80px;
        font-size: 40px;
    }
}

.switchs {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;

    &>div {
        width: 50%;
        text-align: center;
        margin: 15px 0;

        .el-switch {
            margin-top: 8px;
        }
    }
}

.Preset .el-button {
    width: 80px;
    height: 60px;
    font-size: 18px;
}
</style>
  